<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="mb-10">
<!--          <el-date-picker-->
<!--            v-model="timeLine"-->
<!--            type="daterange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="请假开始日期"-->
<!--            end-placeholder="请假结束日期"-->
<!--            format="yyyy-MM-dd"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            size="small"-->
<!--            class="mr-10">-->
<!--          </el-date-picker>-->
<!--          <el-button type="primary" size="small" @click="searchFn('search')"><i-->
<!--            class="el-icon-search"></i>搜索-->
<!--          </el-button>-->
          <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStripe"
        :border="tableBorder"
        tooltip-effect="dark"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c">
        <el-table-column
          align="center"
          label="学生">
          <template slot-scope="scope">
            {{scope.row.student?scope.row.student.name: ''}}
            【{{ scope.row.classes ? scope.row.classes.class_name : '' }}】
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="时间">
          <template slot-scope="scope">
            {{ scope.row.start_time}}至
            {{ scope.row.end_time}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="content"
          label="留言内容">
        </el-table-column>
        <el-table-column
          align="center"
          prop="create_time"
          label="创建日期">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button plain type="danger" size="mini" @click="detelDetailFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <div class="height40"></div>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import {parentMessageIndex, parentMessageDelete} from "@/api/admin/school";


export default {
  components: {},
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        start_time: '',
        end_time: ''
      },
      timeLine: []
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.editForm.p = this.page.pageindex
      parentMessageIndex(this.editForm).then(res => {
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索组件
    searchFn(option) {
      if (option === 'refresh') {
        this.timeLine = []
        this.editForm.start_time = '';
        this.editForm.end_time = '';
      } else {
        this.editForm.end_time = this.timeLine && this.timeLine.length ? this.timeLine[1] : '';
        this.editForm.start_time = this.timeLine && this.timeLine.length ? this.timeLine[0] : '';
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    detelDetailFn(item) {
      this.$confirm(`确认永久删除【${item.day}】该代班记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(item.id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      parentMessageDelete({id: id}).then(res => {
        console.log('res:', res)
        if (!res.code) {
          this.$message.success('操作成功')
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
  mounted() {
  },
}
</script>

